<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.css" />
		<script type="text/javascript" src="js/jquery-2.0.3.js" ></script>
		<style>
			#Logindiv{
				position: absolute;
				width: 400px;
				height:300px;
				background-color: lightgrey;
				top: 50%;
				left: 50%;
				z-index: 1;
				margin-left: -200px;
				margin-top: -150px;
				opacity: 0.9;
				border: solid lightgray;
				border-radius: 25px;
				padding: 10px,10px,10px,10px;
				
			}
			#maindiv{
				position: absolute;
				top:0;
				bottom: 0;
				left: 0;
				right: 0;
				background-image: radial-gradient(#9dbdb3,#37b9e9);
			}
			#Loginform{
				
				margin-left: 40px;
				margin-right: 40px;
				
			}
			#faceCheck{
				position: absolute;
				width: 50px;
				height: 50px;
				top: 50%;
				left: 50%;
				margin-top: -175px;
				margin-left: -25px;
				background-color: #5cb85c;
				z-index: 2;
				border: solid #5cb85c;
				border-radius: 100px;
				
			}

		</style>
	</head>
	<body>
		<div id = "maindiv">
			
				<div id="faceCheck" >
					<button type="button" id="start" class="btn btn-default btn-block btn-success btn-lg" aria-label="LoginByFace" style="border-radius: 100px; border: hidden;">
  						<span class="glyphicon glyphicon-camera" aria-hidden="true" style="margin-left: -3px;"></span>
					</button>
				</div>
				
				<div id="Logindiv" class="row clearfix" align="center">
					<div id="Loginform">
						<canvas id="canvas" width="200px" height="200px" style="background-color: white;margin-top: 50px;"></canvas>
						<video hidden="hidden" id="video" width="200px" height="200px"></video>
					</div>
				</div>
		</div>
		
	<script>
		var flag = false;
		$("#start").click(function(){
			if(flag == false){
				var constraints = {video: true }; 
				var pos = navigator.mediaDevices.getUserMedia(constraints);
				pos.then(function(mediaStream) {
				    video = document.getElementById("video")
				  	video.srcObject = mediaStream;
				  	video.onloadedmetadata = function(e) {
				    video.play();
				    flag = true;
				  };
				})
				.catch(function(err) { console.log(err.name + ": " + err.message); }); // 总是在最后检查错误
			}else{
				closeVideo();
				int1 = window.clearInterval(int1);
				
			}
		});
		//画图并提交图像
		function drawImg(){
			var	c = document.getElementById("canvas");
			var v = document.getElementById("video");
			
			ctx = ctx = c.getContext("2d");
			ctx.drawImage(v,0,0,200,200);
			var sdata = c.toDataURL("image/png");
			
			$.ajax({
				url:"LoginRegistServlet",
				type:"post",
				data:{op:"loginface",imag:sdata},
				success:function(data){
					if(data != "null"){
						var logmsg = JSON.parse(data);
						
						if(logmsg.group_id == "User"){
							//跳转到用户界面
							alert("登录成功！")
							closeVideo();
							int1 = window.clearInterval(int1);
							location.href="http://localhost:8686//BeiJing_Project_Level_Two/Seat.jsp";
						}else if(logmsg.group_id == "Admin"){
							//跳转到管理员界面
							alert("登录成功！")
							closeVideo();
							int1 = window.clearInterval(int1);
							location.href="http://localhost:8080//BeiJing_Project_Level_Two/UserManagerServlet?op=searchAll&page=1&pageSize=15";
						}
					}
				}
			});
		}
	   //关闭摄像头
	   function closeVideo(){
	   		video.srcObject.getVideoTracks()[0].stop();
	   }
		var int1 = self.setInterval("drawImg()",1000);
		
	</script>
	</body>
</html>
